<script>

import * as echarts from 'echarts';
// import $ from 'jquery'
export default {
  name: 'VisualizationSix',
  data() {
    return{

    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.$axios.get('/api/vis/data6', {}).then(res => {
        if (res.data.code === 20041) {
          let data = [];
          for (let i = 0; i < res.data.data.length; i++) {
            data.push(
                { value: res.data.data[i].param2, name: res.data.data[i].param1 },
            );
          }
          this.init(data)
        }
      }).catch(error => {
        this.open4(error);
      })
    },
    open4(msg) {
      this.$notify.error({
        title: msg,
        message: '这是一条错误的提示消息'
      });
    },
    init(data) {
      var chartDom = document.getElementById('main6');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: [
          {
            text: '价格区间占比'
          }
        ],
        backgroundColor: 'white',
        tooltip: {
          show: true,
          trigger: 'item',
          //{a}(系列名)，{b}(数据项名),{c}(数值),{d}(百分比)
          formatter: "{a} <br/>{b} : {c} ({d}%)",
          backgroundColor: "rgba(1, 13, 19, 0.5)",
          borderWidth: 0,
          textStyle: {
            color: "rgba(212, 232, 254, 1)",
            // fontSize: fontChart(0.24),
          },
        },

        legend: {
          orient: 'vertical',
          top: 20,
          left: 40,
          itemWidth: 15,
          itemHeight: 10,
          itemGap: 25,
          borderRadius: 4,
          textStyle: {
            color: "#000",
            fontFamily: "Alibaba PuHuiTi",
            fontSize: 14,
            fontWeight: 400,
          },
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            center: ['50%', '40%'],
            data: data,
            label: {
              normal: {
                formatter: ["{b|{b}}","{c|{d}%}"].join("\n"),
                rich: {
                  c: {
                    color: "inherit",
                    fontSize: 20,
                    fontWeight: "bold",
                    lineHeight: 5,
                  },
                  b: {
                    fontSize: 15,
                    height: 40,
                  },
                },
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
        ]
      };

      option && myChart.setOption(option);

    }
  }

}
</script>

<template>
  <div id="main6"></div>
</template>

<style scoped>
#main6 {
  width: 100%;
  height: 100%;
}
</style>